<template>
	<view class="container">
		<!-- 详情图片 -->
		<view class="detailImage">
			<image :src="data.img">
		</view>
		<!-- 详情基本信息 -->
		<view class="detailInfo">
			<view class="detailInfoName">
				<label>{{data.goodsname}}</label>
			</view>
			<view class="detailInfoPrice">
				<label style="color: red;">￥ {{data.price}}</label>
				<label style="font-size: 24rpx;color: #ccc;">(此价格不与套装优惠同时享受)</label>
			</view>
		</view>

		<!-- 基本信息改变 -->
		<view class="changeInfo">
			<view class="youhui">
				<view>促销：<label class="manjian">满减</label><label class="dazhe">满2件9折；3件8折</label></view>
			</view>
			<!-- 数量加减 -->
			<view class="changeNum">
				<view class="num">购买数量</view>
				<view class="action">
					<!--  <label class="jian">-</label>
				  <label class="zhi">{{num}} </label>
				  <label  class="jia">+</label>
				  -->
					<label class="jian" v-if="num<=0" disabled="" for="">-</label>
					<label class="jian" v-if="num>0" @click="reduce" for="">-</label>
					<label class="zhi" for="">{{num}} </label>
					<label class="jia" @click="plus" for="">+</label>
				</view>
			</view>
			<!-- 商品属性 -->
			<view class="changeState">
				<view class="productStat">
					<label for="">{{data.specsname}} </label>
				</view>
				<view class="productGuige">
					<label>规格</label>
					<view v-for="(item,index) in res" :key="index">
						<view class="threed3i1"> {{item}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="productDetail">
			<view class="productDetailTitle">商品详情</view>
			<!-- 需要处理图片自适应问题 -->
			<rich-text :nodes="data.description"></rich-text>
		</view>

		<view class="productEval">
			<view class="eval">商品评价</view>
			<view>
				<label class="evalUsername">小李白</label>
				<label class="evalUsertitle">效果很好，物流到位，下次继续来</label>
				<view class="evalImage">
					<image src="../../static/detail/pingjia1.jpg" />
					<image src="../../static/detail/pingjia2.jpg" />
					<image src="../../static/detail/pingjia3.jpg" />

				</view>
				<label class="evalTime">2020-01-13</label>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="foot">
			<button @click="join" class="footbtn1">加入购物车</button>
			<button @click="jump" class="footbtn2">立即购买</button>
		</view>
	</view>
</template>
<script>
	import {baseUrl} from "../../utils/config.js"
	export default {
		data() {
			return {
				data: {},
				res: [],
				token: "",
				num: 1,
				id: ""
			}
		},
		methods: {
			async join() {
				let sult = await this.$http("/api/cartadd", "get", {
					uid: this.token.uid,
					goodsid: this.id,
					num: this.num
				}, this.token.token)
				console.log(sult);
				uni.showToast({
					title: "添加成功"
				})
			},
			jump(){
				uni.setStorageSync("goodstwo", this.data)
				uni.navigateTo({
					url: "../confirm/confirm"
				})
			},
			reduce() {
				this.num--
			},
			plus() {
				this.num++
			}
		},
		async onLoad(e) {
			this.id = e.id
			this.token = JSON.parse(uni.getStorageSync("login"))
			console.log(this.token.uid);

			let result = await this.$http("/api/getgoodsinfo", "GET", {
				id: e.id
			})
			this.data = result.data.list[0]
			this.res = this.data.specsattr.split(",")
			console.log(this.data);
			this.data.img=baseUrl+this.data.img

		},
		mounted() {
			var id = this.$mp.query;
			console.log(id)
		}
	}
</script>
<style>
	@import url("../../common/css/details.css");
</style>
